<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动元素</title>
	</head>
	<body>
		<ul id="List1">
			<li>兰花</li>
			<li>桂花</li>
            <li>菊花</li>
		</ul>
		<ul id="List2">
			<li>松树</li>
			<li>柏树</li>
		</ul>
		<button onclick="myFunction()">点击开始移动</button>
		<script>
			function myFunction()
			{
				// 获取“柏树”元素
				var baiShu = document.getElementById('List2').children[1]; // 第二个子元素即为“柏树”
				// 获取“兰花”元素
				var lanHua = document.getElementById('List1').children[0]; // 第一个子元素即为“兰花”
				
				// 检查两个元素是否都存在
				if (baiShu && lanHua) {
				    // 克隆“柏树”元素
				    var baiShuClone = baiShu.cloneNode(true); // true 表示深克隆，即包括所有子节点
				    // 在“兰花”元素前插入“柏树”的克隆
				    lanHua.parentNode.insertBefore(baiShuClone, lanHua);
				}
			}
		</script>
	</body>
</html>
